<template>
    <div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import mapJson from '@/utils/china.json'

let mychart = null
const chart = ref(null)
const props = defineProps(['data'])

const option = ref({
    timeline: {
        data: props.data.voltageLevel,
        axisType: 'category',
        left: '10%',
        right: '10%',
        bottom: 0,
        width: '80%',
        autoPlay: true,
        playInterval: 3000,
        label: {
            normal: {
                textStyle: {
                    color: '#fff'
                }
            },
            emphasis: {
                textStyle: {
                    color: '#ddd'
                }
            }
        },
        lineStyle: {
            color: '#555'
        },
        symbolSize: 15,
        checkpointStyle: {
            borderColor: '#888',
            borderWidth: 2,
            color: 'red'
        },
        controlStyle: {
            // showNextBtn: true,
            // showPrevBtn: true,
            // showPlayBtn: true,
            normal: {
                color: '#666',
                borderColor: '#666'
            },
            emphasis: {
                color: '#aaa',
                borderColor: '#aaa'
            }
        },
        progress: {
            lineStyle: {
                color: "red"
            },
            itemStyle: {
                color: 'red'
            }
        },
    },
    baseOption: {
        grid: {
            right: '2%',
            top: '17%',
            bottom: '10%',
            width: '22%',
            // containLabel:true
        },
        geo: {
            show: true,
            map: 'china',
            roam: true,
            zoom: 1,
            center: [113.8, 34],
            left: '20%',
            right: '25%',
            top: '0%',
            bottom: '20%',
            itemStyle: {
                normal: {
                    borderColor: 'rgba(147,235,248,1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        // x: 0.5,
                        // y: 0.5,
                        // r: 0.5,
                        colorStops: [
                            { offset: 0, color: 'rgba(147,235,248,0)' },
                            { offset: 1, color: 'rgba(147,235,248,.2)' }
                        ]
                    },
                },
                emphasis: {
                    areaColor: '#389bb7',
                    borderWidth: 0,
                }
            },
        }
    },
    options: []
})
props.data.voltageLevel.forEach((item, index) => {
    option.value.options.push({
        // backgroundColor: '#142037',
        title: [
            {
                text: '2019-2023年度数据统计',
                textStyle: {
                    fontSie: 30,
                    color: '#fff'
                },
                left: '0',
                top: '3%'
            },
            {
                text: item + '年度数据统计',
                textStyle: {
                    fontSize: 15,
                    color: '#fff'
                },
                right: '0',
                top: '5%'
            }
        ],
        tooltip: {},
        xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            axisLine: {
                show: true
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: true
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
                interval: 0
            }
        },
        yAxis: {
            type: 'category',
            axisLine: {
                show: true
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 7
                }
            },
            data: props.data.categoryData[item].map((i) => i.name),
        },
        series: [
            {
                type: 'bar',
                // zlevel: 1.5,
                itemStyle: {
                    color: props.data.colors[index],

                },
                data: props.data.categoryData[item].map((i) => i.value)
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: props.data.topData[item],
                symbolSize: function (val) {
                    return val[2] / 6
                },
                itemStyle: {
                    color: props.data.colors[index]
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        show: true,
                        position: 'left'
                    }
                }

            }
        ]
    })
})
const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    echarts.registerMap('china', { geoJSON: mapJson })
    mychart = echarts.init(chart.value)
    initChart()
})
window.addEventListener('resize', () => {
    mychart.resize()
})
</script>

<style lang="scss" scoped></style>